@import "~@/assets/scss/modules/variables-module.scss";

@mixin style__grey {
  color: $input-font-color;
  background-color: $input-background-color;
}

@mixin el-input__grey {
  .el-input__inner {
    &::placeholder {
      color: $input-font-color;
    }
    @include style__grey;
  }
  .el-input__suffix .el-select__caret {
    color: $select-caret-color;
    font-weight: bolder;
  }
}

@mixin el-date-editor__grey {
  background-color: $input-background-color;
  .el-range-input, .el-range-input::placeholder, .el-input__icon {
    color: $input-font-color;
    background-color: inherit;
  }
  .el-range-input {
    background-color: $input-background-color;
  }
}

@mixin filter-row {
  .filter-item {
    @include el-input__grey;
    ::v-deep {
      .el-input {
        @include el-input__grey;
      }
    }
    
    ::v-deep 
    &.el-date-editor {
      margin-left: $gap-default;
      ::v-deep {
        @include el-date-editor__grey;
      }
    }
    &:not(.el-date-editor) {
      width: 10em;
    }
    & ~ .filter-item {
      margin-left: $gap-default;
    }
  }
  ::v-deep .el-radio {
    @include style__grey;
    margin-right: 0;
  }
}

@mixin mui-radio-group {
  ::v-deep .el-radio-button {
    & ~ .el-radio-button {
      margin-left: $gap-default;
    }

    .el-radio-button__inner {
      border: none;
    }

    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      color: $input-font-color;
      background-color: $input-background-color;
      box-shadow: none;
    }
  }
}

@mixin device-content {
  background-color: #ffffff;
  margin-top: 20px;
  padding: 20px;
  border-radius: 5px;
  position: relative;
  .title{
    .span-1{
      font-size: 18px;
      color: $modeles-title-color;
    }
    .span-2,.span-3{
      font-size: 14px;
      color: $modeles-title-color;
      margin-left: 10px;
    }
  }
}

@mixin layout-header {
  .header {
      font-size: 150%;
      margin-bottom: 1vh;
      .text {
          font-weight: bold;
      }
      .el-icon-question {
          margin-left: $gap-default;
          color: $--color-text-placeholder;
      }
  }
} 